<template>
  <div v-if="showButton" class="taxi-btn-container">
    <button class="taxi-btn" @click="handleTaxiClick">
      🚕 打车前往
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

import { useStore } from 'vuex'
import { useChatPoiStore } from '@/store/chatpoi'
const chatpoi = useChatPoiStore()
const $store = useStore()



// 定义组件属性
const props = defineProps({
  poi: {
    type: Object,
    required: true
  },
  distance: {
    type: [String, Number],
    default: 0
  }
})

// 计算是否显示按钮
const showButton = computed(() => {
  const distance = parseInt(props.distance)
  return distance > 700
})

// 打车功能
const handleTaxiClick = () => {
  console.log('需要到达的地址',props.poi.address)
  console.log('需要到达的坐标',props.poi.location)
  // chatpoi.address = props.poi.address
  // chatpoi.location = props.poi.location
  // //
  const [endLng, endLat] = props.poi.location.split(',')
  const [startLng, startLat] = $store.state.city.center.split(',')
  // 直接跳转到首页tabBar页面
  // uni.redirectTo({url:'/pages/index/index'});
  console.log('startLng',startLng)
  console.log('startLat',startLat)
  console.log('endLng',endLng)
  console.log('endLat',endLat)
  uni.navigateTo({
			url : `/pages/createOrder?slng=${startLng}&slat=${startLat}&elng=${endLng}&elat=${endLat}&s=当前位置&e=${props.poi.address}`
		})
}
</script>

<style lang="scss" scoped>
.taxi-btn-container {
  margin: 10px 0;
}

.taxi-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transition: all 0.3s ease;
  font-weight: 500;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}
</style> 